<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <style>
        li {
            list-style: none;
        }

        header p {
            font-size: 50px;
            color: brown;
            position: absolute;
            top: 60px;
            left: 42%;
        }
        header nav{
            height: 40px;
            background-color: black;
        }
        header ol{
            padding: 0;
            background-color: gray;
            transform: scaleY(0);
        }
        header .t1:hover ol{
           transform: scaleY(1);
        }
        a {
            color: white;
            text-decoration: none;
        }
        .t1{
            color: white;
            float:left;
            width: 100px;
            height: 40px;
            text-align: center;
            line-height: 40px;
        }
        main{
            text-align: center;
        }
        main #ditu{
            position: fixed;
            top:20px;
            right:0;
        }
    </style>
</head>

<body>
    <header>
        <img width="100%" height="700px" src="https://img1.baidu.com/it/u=2382004394,3702563148&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=684">
        <p>天行轶事</p>
        <nav>
            <ul>
                <div>
                    <li class="t1"><a href="https://www.jxufe.edu.cn/">首页</a></li>
                </div>
                <div>
                    <li class="t1">师资</li>
                </div>
                <div>
                    <li class="t1">奖项</li>
                </div>
                <li class="t1">
                    <div>主角</div>
                    <ol>
                        <li>墨律</li>
                        <li>赤鸣</li>
                        <li>游浩贤</li>
                        <li>霍琊</li>
                        <li>青凌</li>
                    </ol>
                </li>
            </ul>
        </nav>
    </header>
    <main>
        <div id="ditu"><img width="250px" height="300px" src="https://img2.baidu.com/it/u=2705885746,3666396435&fm=253&fmt=auto&app=138&f=JPEG?w=658&h=447"></div>
        <p><img width="700px" height="400px" src="https://img2.baidu.com/it/u=3690800666,76494400&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500">
            <img width="500px" height="400px" src="https://img0.baidu.com/it/u=123895963,1029964433&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=737"></p>
            <p><img class="a" width="600px" height="500px" src="https://img0.baidu.com/it/u=2691982698,3387695115&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=507">
            <img class="a" width="600px" height="500px" src="https://img2.baidu.com/it/u=312815671,1342225455&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=775">
            <img  width="600px" height="400px" src="https://img2.baidu.com/it/u=1760814127,419645771&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=549"></p>
            <p><img width="1200px" height="800px" src="https://img2.baidu.com/it/u=333140241,2713644661&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=778"></p>
            <p><img width="500px" height="500px" src="https://img2.baidu.com/it/u=17484850,3003513299&fm=253&fmt=auto&app=138&f=JPEG?w=658&h=500">
            <img width="700px" height="500px" src="https://img2.baidu.com/it/u=2256236901,2044158243&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=707"></p>
            </div>
    </main>
    <footer></footer>
</body>

</html>